import React, {useState} from "react";
import {makeStyles} from "@rn-vui/themed";
import {Animated, Pressable, StyleSheet, Text, View} from "react-native";
import {useThemeColors} from "../hooks/hooks.tsx";

const useStyles = makeStyles(({colors}) => ({
    background: {
        backgroundColor: "rgba(0,0,0,0.4)",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: "100%",
    },
    dialog: {
        backgroundColor: colors?.white,
        borderRadius: 10,
        marginHorizontal: 20,
        position: "absolute",
        width: 400
    },
    dialogHeader: {
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        justifyContent: "center",
        alignItems: "center",
        borderBottomColor: colors?.grey4,
        borderBottomWidth: StyleSheet.hairlineWidth,
        paddingVertical: 12,
    },
    dialogTitle: {
        fontSize: 22,
        color: colors?.grey1,
        fontWeight: "bold",
    },
    dialogContent: {
        paddingVertical: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        justifyContent: "center",
    },
    dialogMessage: {
        fontSize: 16,
        color: colors?.grey1,
    },
    dialogFooter: {
        flexDirection: "row",
        borderTopColor: colors?.grey4,
        borderTopWidth: StyleSheet.hairlineWidth,
    },
    button: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        paddingVertical: 15,
    },
    buttonTitle: {
        fontSize: 18,
        color: colors?.blue,
    },
}));

interface ConfirmOptions {
    title?: string;
    message?: string;
    cancelText?: string;
    confirmText?: string;
    onCancel?: () => void;
    onConfirm?: () => void;
}

const ConfirmBase = React.forwardRef((props: any, ref: any) => {
    const styles = useStyles();
    const colors = useThemeColors();
    const [visible, setVisible] = useState<boolean>(false);
    const [opacity, setOpacity] = useState(new Animated.Value(0));
    const [scale, setScale] = useState(new Animated.Value(0.4));
    const [options, setOptions] = useState<ConfirmOptions>({
        confirmText: "Confirm",
        cancelText: "Cancel",
        title: "Confirm",
        message: "Are you sure?",
        onConfirm: () => {
        },
        onCancel: () => {
        },
    });

    React.useImperativeHandle(ref, () => ({
        show: (params?: ConfirmOptions) => {
            setOptions({
                ...options,
                ...params
            });
            setVisible(true);
        },
        hide: () => {
            setVisible(false);
        },
    }));

    React.useEffect(() => {
        if (visible) {
            Animated.parallel([
                Animated.timing(opacity, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true,
                }),
                Animated.timing(scale, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true,
                }),
            ]).start();
        } else {
            opacity.setValue(0);
            scale.setValue(0);
        }
    }, [visible]);

    if (!visible) {
        return <></>
    }

    return (
        <View style={[StyleSheet.absoluteFill, styles.background]}>
            <Animated.View style={[
                styles.dialog,
                {
                    opacity: opacity,
                    transform: [{scale: scale}],
                }
            ]}>
                <View style={styles.dialogHeader}>
                    <Text style={styles.dialogTitle}>{options.title}</Text>
                </View>
                <View style={styles.dialogContent}>
                    <Text style={styles.dialogMessage}>{options.message}</Text>
                </View>
                <View style={styles.dialogFooter}>
                    <Pressable
                        style={styles.button}
                        onPress={() => {
                            setVisible(false);
                            options.onCancel?.();
                        }}
                    >
                        <Text style={styles.buttonTitle}>{options.cancelText}</Text>
                    </Pressable>
                    <Pressable
                        style={[styles.button, {
                            borderLeftWidth: StyleSheet.hairlineWidth,
                            borderLeftColor: colors.grey4,
                        }]}
                        onPress={() => {
                            setVisible(false);
                            options.onConfirm?.();
                        }}
                    >
                        <Text style={styles.buttonTitle}>{options.confirmText}</Text>
                    </Pressable>
                </View>
            </Animated.View>
        </View>
    );
});

let confirmRef: any = null;
const Confirm = () => {
    const ref = React.useRef<any>();
    React.useEffect(() => {
        if (ref.current) {
            confirmRef = ref.current;
        }
    }, []);

    return <ConfirmBase ref={ref}/>
}


Confirm.displayName = "Confirm";

Confirm.show = (options?: ConfirmOptions) => {
    //console.log(confirmRef);
    confirmRef?.show(options);
};

Confirm.hide = () => {
    confirmRef.hide();
};

export default Confirm;
